{% extends 'basic/layout/page_basic.html' %}
{% load static %}


<!-- Title -->
{% block title %} 学生照片 {% endblock %}


<!-- CSS -->
{% block css %}
    <style>
        .contentArea .left:hover {
            font-weight: bold;
            color: red;
        }

        .contentArea i:hover {
            color: red;
            font-weight: bold;
        }


    </style>
{% endblock %}


<!-- Content -->
{% block content %}
    <!-- 内容01：面包屑导航-->
    <span class="layui-breadcrumb">
      <a href="/">首页</a>
      <a href="#">学生管理</a>
      <a><b>学生照片</b></a>
    </span>

    <!-- 内容02：查询部分 -->
    <div class="queryArea" style="margin: 15px 0 30px 0;">
        <form class="layui-form">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="inputStr"><b>编号：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="inputStr" id="inputStr" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="startdate"><b>开始日期：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="startdate" id="startdate" class="layui-input" placeholder="请选择开始日期">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="enddate"><b>结束日期：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="enddate" id="enddate" class="layui-input" placeholder="请选择结束日期">
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" id="btnQuery" class="layui-btn">
                        <i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询
                    </button>
                    <button type="button" id="btnAll" class="layui-btn">
                        <i class="fa fa-bars" aria-hidden="true"></i>&nbsp; 全部
                    </button>
                    <button type="button" id="btnUpload" class="layui-btn">
                        <i class="fa fa-upload" aria-hidden="true"></i>&nbsp;上传
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 内容03： 图片展示区域-->
    <div class="contentArea" id="contentArea" style="margin:auto;"></div>

{% endblock %}


<!-- JS -->
{% block js %}
    <script>
        // 入口函数
        $(function () {
            // 页面初始化
            initPage();
            // 响应所有按钮的点击
            buttonClick();
            // 上传文件
            uploadImage();

            // 获取数据库的照片
            loadImages();
        });

        // =============页面初始化的功能实现 ===========
        function initPage() {
            layui.use(['form', 'laydate'], function () {
                let form = layui.form;
                let laydate1 = layui.laydate;
                let laydate2 = layui.laydate;

                // 显示日期的选择框
                laydate1.render({
                    elem: '#startdate',
                });
                laydate2.render({
                    elem: '#enddate',
                })
            })
        }

        // ============ 响应按钮点击事件 ===============
        function buttonClick() {
            //== 查询==
            $('#btnQuery').on('click', function () {
                loadImages();
            });
            // == 显示全部==
            $('#btnAll').on('click', function () {
                location.reload();
            });
        }

        // ============= 文件上传的功能实现 ============
        function uploadImage() {
            layui.use(['upload'], function () {
                let upload = layui.upload;

                upload.render({
                    elem: '#btnUpload'
                    , url: '{% url 'upload_student_image' %}' // 上传图片的后台接口【Python实现】
                    , method: 'post'
                    , data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                    }
                    , accept: 'file' //普通文件
                    , exts: 'png|jpg|jpeg' //只允许上传压缩文件
                    , size: 10240, //限制文件大小，单位 KB
                    //,multiple: true // 是否支持多文件一次上传

                    // ============= 回调函数 ==============
                    before: function (res, index, upload) {
                        // 上传之前执行的函数
                        layer.load();  //上传loading

                    },
                    done: function (res, index, upload) {
                        // 上传成功后执行的函数
                        // 关闭等待的动画
                        layer.closeAll('loading');
                        // 判断是否成功
                        if (res.code === 0) {
                            layer.msg("图片上传成功！");
                            location.reload();
                        } else {
                            layer.msg(res.error, {
                                icon: 2,
                                area: ['500px', '250px'],
                                time: -1,
                                btn: ['关闭']
                            })
                        }

                    },
                    error: function (res, index, upload) {
                        // 上传错误后执行的函数
                        // 关闭等待的动画
                        layer.closeAll('loading');
                    }
                })
            })
        }


        // ============= 获取存储在数据库的照片 =============
        function loadImages() {
            // Ajax请求所有照片
            layui.config({
                base: "{% static 'plugin/layui/layui_exts/' %}"//配置 layui 第三方扩展组件存放的基础目录
            }).extend({
                cardTable: 'cardTable/cardTable'
            }).use(['cardTable'], function () {
                // 实例化
                let cardTable = layui.cardTable;
                // 渲染
                cardTable.render({
                    elem: "#contentArea",
                    url:"{% url 'list_student_image2' %}",
                    linenum: 6,
                    limit: 12,
                    limits:[12, 18,24],
                    page: true,

                })

            })
        }




        // ======= 在弹出层显示图片 ========
        function previewImg(obj) {
            var img = new Image();
            img.src = obj.src;

            var height = img.naturalHeight + 50; // 原图片大小
            var width = img.naturalWidth; //原图片大小
            var imgHtml = "<img src=" + obj.src + " style='width:" + width + "height:" + height + "'/>";
            //弹出层
            layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: 'auto',
                //area: [width.toString() + 'px', height.toString() + 'px'],// [500 + 'px',550+'px'],  //  //原图显示
                maxWidth: '1000px',
                maxHeight: '800px',
                shadeClose: true,
                scrollbar: true,
                title: "<b style='color:navy'>【图片预览】</b>", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }


    </script>
{% endblock %}